<template>
    <div class="setting">
        <div class="list flex-between">
            <div class="label">头像</div>
            <div class="right">
                <img :src="userinfo.avatar" alt="" :onerror="errorImg">
                <input type="file" accept="image/*" @change="upload">
            </div>
        </div>
        <div class="list flex-between">
            <div class="label">昵称</div>
            <div class="right flex" @click="modifyName = true">
                <span>{{userinfo.username}}</span>
                <i class="iconfont iconyoujiantou"></i>
            </div>
        </div>
        <router-link tag="div" :to="'/sendCode?tel='+userinfo.mobile" class="list flex-between">
            <div class="label">手机号</div>
            <div class="right flex">
                <span>{{userinfo.mobile}}</span>
                <i class="iconfont iconyoujiantou"></i>
            </div>
        </router-link>
        <filter-box align="center" v-show="modifyName">
            <div class="content">
                <h3>修改昵称</h3>
                <input type="text" placeholder="请输入昵称" v-model="userinfo.username">
                <div class="btn flex">
                    <div class="cancle" @click="modifyName = false">取消</div>
                    <div class="ok" @click="modifyNameF">确定</div>
                </div>
            </div>
        </filter-box>
        <div class="loginout flex-center" @click="loginout">
            退出登录
        </div>
    </div>
</template>

<script>
    import FilterBox from "../../components/filterbox"
    export default {
        name: "setting",
        components:{
            FilterBox
        },
        data(){
            return {
                modifyName:false,
                errorImg:'this.src="'+ require('../../assets/img/self-pic.png')+ '"',
                userinfo:{},
            }
        },
        mounted(){
          this.getUser()
        },
        methods:{
            loginout(){
                localStorage.removeItem('token')
                this.$router.replace({
                    path:"/login"
                })
            },
            getUser(){
                this.$http.post('user/getUserInfo',{}).then(res=>{
                    console.log(res)
                    this.userinfo = res.data;
                    this.$store.dispatch('changeUser',res.data)
                })
            },
            upload(e){
                let file = e.target.files[0]
                let reader = new FileReader();
                reader.readAsDataURL(file)
                reader.onload = res1 => {
                    this.$http.post('user/avatar',{
                        avatar:res1.target.result
                    }).then(res=>{
                        if(res.code == 1){
                            this.getUser()
                        }
                    })
                }
            },
            modifyNameF(){
                if(!this.userinfo.username){
                    this.$toast('昵称不能为空')
                    return
                }
                this.$http.post('user/username',{
                    username:this.userinfo.username
                }).then(res=>{
                    this.$toast(res.msg);
                    if(res.code == 1){
                        this.modifyName = false
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .setting{
        height: 480px;
        background: white;
        .list{
            padding: 30px;
            border-bottom: 1px solid #eee;
            img{
                width: 120px;
                height: 120px;
                border-radius: 50%;
                border:2px solid #eee;
                object-fit: cover;
            }
            i{
                margin-left: 10px;
            }
            .label{
                font-size: 28px;
                color:#333;
            }
            span{
                font-size: 30px;
                color:#666666;
            }
            .right{
                position: relative;
                input{
                    position: absolute;
                    width: 100%;
                    height:100%;
                    top: 0;
                    left: 0;
                    opacity: 0;
                }
            }
        }
        .content{
            width: 690px;
            height: 320px;
            background-color: #ffffff;
            border-radius: 10px;
            padding: 45px 56px;
            box-sizing: border-box;
            h3{
                font-size: 32px;
            }
            input{
                border-bottom: 2px solid #185fff;
                padding: 50px 0 20px;
                width: 100%;
                font-size: 30px;
            }
            .btn{
                justify-content: flex-end;
                margin-top: 20px ;
                div{
                    padding: 20px 50px;
                    font-size: 30px;
                    color:#666;
                }
                .ok{
                    color:#185fff;
                }
            }
        }
        .loginout{
            position: fixed;
            width: 100%;
            height: 90px;
            bottom:0;
            background: red;
            font-size: 30px;
            color:white;
        }
    }
</style>
